import React, { useEffect, useState } from 'react'
import Taro, { useDidShow,useReachBottom } from '@tarojs/taro'
import {View,Image,Text} from '@tarojs/components'
import './index.scss'

export default function SelectCard() {
  const {router} = Taro.getCurrentInstance()
  const [filters,setFilters] = useState({page:1,pageSize:10})
  const [cardList,setCardList] = useState([])
  const [curCard,setCurCard] = useState(null)
  useDidShow(()=>{
    _initData()
  })
  useReachBottom(()=>{
    if(filters.totalCount > cardList.length){
      _initData({page:filters.page+1},data=>{
        setCardList([...cardList,...data?.list])
      })
    }else{
      setMoreStatus('no-more')
    }
  })
  const _initData = (e,func)=>{
    const data = {
      page:filters.page,
      pageSize:filters.pageSize,
      cinemaId:Taro.getStorageSync('merchantId'),
      ...e
    }
    Taro.$post('/cinema-app/api/card/getOrderCardPageList',data).then(res=>{
      if(res.code == '1'){
        setFilters({...data,totalCount:res.content?.pagination?.totalCount})
        if(func){
          func(res.content)
          return;
        }
        setCardList(res.content?.list)
        if(router.params.cardId){
          const idx = res.content?.list.findIndex(res=>res.id == router.params.cardId)
          setCurCard(idx)
        }
      }
    })
  }
  
  return (
    <View className='page-select-card'>
      <View className="card-title">会员权益</View>
      {cardList?.length?
      <View className="card-list">
        {cardList.map((item,idx)=>{
          return <View className="list-item valid" key={item.id} style={{background:item.backgroundType=='1'?item.backgroundContent:`url(${item.backgroundContent})`}} onClick={()=>{
            if(curCard == idx){
              setCurCard(null)
              return;
            }
            setCurCard(idx)
          }}>
            <View className="item-header">
              <Image className='header-img' src={Taro.getStorageSync('appConfig')?.iconUrl || require('@/images/mine/logo.png')} mode='aspectFill'></Image>
              <View className='header-info'>
                <View className="info-h2 dot">{item.cardName}</View>
                <View className="info-p dot">{item.cardNo}</View>
              </View>
              <Image src={require(`@/images/common/${curCard == idx?'radio-white-on':'radio-white'}.svg`)} className='header-icon' mode='aspectFill' />
            </View>
            <View className="item-desc">
              <View>{item.typeDesc}</View>
              <View><Text style={{fontWeight:400}}>余额：¥</Text>{item.amount}</View>
            </View>
          </View>
        })}
      </View>:<View className='var-empty'>暂无可用会员卡</View>}
      <View className="coupon-footer">
        <View className="footer-button" onClick={()=>{
          if(router.params?.type == 'shops'){
            Taro.eventCenter.trigger('changeCard',{curCard:cardList[curCard]})
            Taro.navigateBack()
            return;
          }
          if(cardList[curCard]?.isDxCard == '1' && router.params.price && (cardList[curCard]?.amount*1) < (router.params.price*1)){
            Taro.$toast('该卡余额不足')
            return;
          }
          Taro.eventCenter.trigger('changeCard',{curCard:cardList[curCard]})
          Taro.navigateBack()
        }}>确认选择</View>
      </View>
    </View>
  )
}
